<template>
  <div class="vm-image-list">
    <Row class="image-list-heading vm-panel">
      <Row type="flex"
           align="middle"
           justify="space-between"
           class="panel-body">
        <div class="search-bar">
          <Input placeholder="Please enter ..."
                 v-model="keyword"
                 style="width: 300px"></Input>
          <Button type="ghost"
                  @click="search">搜索</Button>
        </div>
        <Row type="flex"
             align="middle"
             class="page">
          <span>Show</span>
          <Input :max="20"
                 :min="1"
                 :number="true"
                 v-model="showNum"
                 class="input-number"
                 @on-change=" updateDataShow "></Input>
          <span class="margin-end">/ Page</span>
          <span class="total">Total {{ data.length }}</span>
          <Page :total="data.length"
                :current="currentPage"
                :page-size="showNum"
                @on-change="pageChange"></Page>
        </Row>
      </Row>
    </Row>
    <Row class="image-list"
         :gutter="16">
      <Col :lg="6"
           :sm="12"
           class="vm-margin"
           v-for="item in dataShow"
           :key="item.id">
      </Col>
    </Row>
  </div>
</template>

<script>

export default {
  name: 'aboutUs',

  props: {
    // origin data
    data: {
      type: Array,
      default: function () {
        return [
          {
            carId: 0,
            carHref: '/cardetail/AMG',
            carImgSrc: '//carphoto.atzuche.com/2car/21/06/629856728/1624198858127_1.jpg',
            carAlt: '奔驰 SLS级AMG(进口) 6.2L 自动挡',
            carLicensePlate: '沪A***11',
            carKm: '6.1',
            carScore: '5.0',
            carPrice: '1950'
          },
          {
            carId: 1,
            carHref: '/cardetail/CLS',
            carImgSrc: '//carphoto.atzuche.com/2car/18/07/229280778/1532488383123_1.jpg',
            carAlt: '奔驰 CLS级(进口) 3.0T 自动挡',
            carLicensePlate: '沪B***03',
            carKm: '4.5',
            carScore: '4.7',
            carPrice: '998'
          },
          {
            carId: 2,
            carHref: '/cardetail/AMG',
            carImgSrc: '//carphoto.atzuche.com/2car/21/06/629856728/1624198858127_1.jpg',
            carAlt: '奔驰 SLS级AMG(进口) 6.2L 自动挡',
            carLicensePlate: '沪A***11',
            carKm: '6.1',
            carScore: '5.0',
            carPrice: '1950'
          },
          {
            carId: 3,
            carHref: '/cardetail/CLS',
            carImgSrc: '//carphoto.atzuche.com/2car/18/07/229280778/1532488383123_1.jpg',
            carAlt: '奔驰 CLS级(进口) 3.0T 自动挡',
            carLicensePlate: '沪B***03',
            carKm: '4.5',
            carScore: '4.7',
            carPrice: '998'
          }, {
            carId: 4,
            carHref: '/cardetail/AMG',
            carImgSrc: '//carphoto.atzuche.com/2car/21/06/629856728/1624198858127_1.jpg',
            carAlt: '奔驰 SLS级AMG(进口) 6.2L 自动挡',
            carLicensePlate: '沪A***11',
            carKm: '6.1',
            carScore: '5.0',
            carPrice: '1950'
          },
          {
            carId: 5,
            carHref: '/cardetail/CLS',
            carImgSrc: '//carphoto.atzuche.com/2car/18/07/229280778/1532488383123_1.jpg',
            carAlt: '奔驰 CLS级(进口) 3.0T 自动挡',
            carLicensePlate: '沪B***03',
            carKm: '4.5',
            carScore: '4.7',
            carPrice: '998'
          }, {
            carId: 6,
            carHref: '/cardetail/AMG',
            carImgSrc: '//carphoto.atzuche.com/2car/21/06/629856728/1624198858127_1.jpg',
            carAlt: '奔驰 SLS级AMG(进口) 6.2L 自动挡',
            carLicensePlate: '沪A***11',
            carKm: '6.1',
            carScore: '5.0',
            carPrice: '1950'
          },
          {
            carId: 7,
            carHref: '/cardetail/CLS',
            carImgSrc: '//carphoto.atzuche.com/2car/18/07/229280778/1532488383123_1.jpg',
            carAlt: '奔驰 CLS级(进口) 3.0T 自动挡',
            carLicensePlate: '沪B***03',
            carKm: '4.5',
            carScore: '4.7',
            carPrice: '998'
          }, {
            carId: 8,
            carHref: '/cardetail/AMG',
            carImgSrc: '//carphoto.atzuche.com/2car/21/06/629856728/1624198858127_1.jpg',
            carAlt: '奔驰 SLS级AMG(进口) 6.2L 自动挡',
            carLicensePlate: '沪A***11',
            carKm: '6.1',
            carScore: '5.0',
            carPrice: '1950'
          },
          {
            carId: 9,
            carHref: '/cardetail/CLS',
            carImgSrc: '//carphoto.atzuche.com/2car/18/07/229280778/1532488383123_1.jpg',
            carAlt: '奔驰 CLS级(进口) 3.0T 自动挡',
            carLicensePlate: '沪B***03',
            carKm: '4.5',
            carScore: '4.7',
            carPrice: '998'
          }, {
            carId: 10,
            carHref: '/cardetail/AMG',
            carImgSrc: '//carphoto.atzuche.com/2car/21/06/629856728/1624198858127_1.jpg',
            carAlt: '奔驰 SLS级AMG(进口) 6.2L 自动挡',
            carLicensePlate: '沪A***11',
            carKm: '6.1',
            carScore: '5.0',
            carPrice: '1950'
          },
          {
            carId: 11,
            carHref: '/cardetail/CLS',
            carImgSrc: '//carphoto.atzuche.com/2car/18/07/229280778/1532488383123_1.jpg',
            carAlt: '奔驰 CLS级(进口) 3.0T 自动挡',
            carLicensePlate: '沪B***03',
            carKm: '4.5',
            carScore: '4.7',
            carPrice: '998'
          }, {
            carId: 12,
            carHref: '/cardetail/AMG',
            carImgSrc: '//carphoto.atzuche.com/2car/21/06/629856728/1624198858127_1.jpg',
            carAlt: '奔驰 SLS级AMG(进口) 6.2L 自动挡',
            carLicensePlate: '沪A***11',
            carKm: '6.1',
            carScore: '5.0',
            carPrice: '1950'
          },
          {
            carId: 13,
            carHref: '/cardetail/CLS',
            carImgSrc: '//carphoto.atzuche.com/2car/18/07/229280778/1532488383123_1.jpg',
            carAlt: '奔驰 CLS级(进口) 3.0T 自动挡',
            carLicensePlate: '沪B***03',
            carKm: '4.5',
            carScore: '4.7',
            carPrice: '998'
          }, {
            carId: 14,
            carHref: '/cardetail/AMG',
            carImgSrc: '//carphoto.atzuche.com/2car/21/06/629856728/1624198858127_1.jpg',
            carAlt: '奔驰 SLS级AMG(进口) 6.2L 自动挡',
            carLicensePlate: '沪A***11',
            carKm: '6.1',
            carScore: '5.0',
            carPrice: '1950'
          },
          {
            carId: 15,
            carHref: '/cardetail/CLS',
            carImgSrc: '//carphoto.atzuche.com/2car/18/07/229280778/1532488383123_1.jpg',
            carAlt: '奔驰 CLS级(进口) 3.0T 自动挡',
            carLicensePlate: '沪B***03',
            carKm: '4.5',
            carScore: '4.7',
            carPrice: '998'
          }, {
            carId: 16,
            carHref: '/cardetail/AMG',
            carImgSrc: '//carphoto.atzuche.com/2car/21/06/629856728/1624198858127_1.jpg',
            carAlt: '奔驰 SLS级AMG(进口) 6.2L 自动挡',
            carLicensePlate: '沪A***11',
            carKm: '6.1',
            carScore: '5.0',
            carPrice: '1950'
          },
          {
            carId: 17,
            carHref: '/cardetail/CLS',
            carImgSrc: '//carphoto.atzuche.com/2car/18/07/229280778/1532488383123_1.jpg',
            carAlt: '奔驰 CLS级(进口) 3.0T 自动挡',
            carLicensePlate: '沪B***03',
            carKm: '4.5',
            carScore: '4.7',
            carPrice: '998'
          }, {
            carId: 18,
            carHref: '/cardetail/AMG',
            carImgSrc: '//carphoto.atzuche.com/2car/21/06/629856728/1624198858127_1.jpg',
            carAlt: '奔驰 SLS级AMG(进口) 6.2L 自动挡',
            carLicensePlate: '沪A***11',
            carKm: '6.1',
            carScore: '5.0',
            carPrice: '1950'
          },
          {
            carId: 19,
            carHref: '/cardetail/CLS',
            carImgSrc: '//carphoto.atzuche.com/2car/18/07/229280778/1532488383123_1.jpg',
            carAlt: '奔驰 CLS级(进口) 3.0T 自动挡',
            carLicensePlate: '沪B***03',
            carKm: '4.5',
            carScore: '4.7',
            carPrice: '998'
          }, {
            carId: 20,
            carHref: '/cardetail/AMG',
            carImgSrc: '//carphoto.atzuche.com/2car/21/06/629856728/1624198858127_1.jpg',
            carAlt: '奔驰 SLS级AMG(进口) 6.2L 自动挡',
            carLicensePlate: '沪A***11',
            carKm: '6.1',
            carScore: '5.0',
            carPrice: '1950'
          },
          {
            carId: 21,
            carHref: '/cardetail/CLS',
            carImgSrc: '//carphoto.atzuche.com/2car/18/07/229280778/1532488383123_1.jpg',
            carAlt: '奔驰 CLS级(进口) 3.0T 自动挡',
            carLicensePlate: '沪B***03',
            carKm: '4.5',
            carScore: '4.7',
            carPrice: '998'
          }
        ]
      }
    }
  },
  data: function () {
    return {
      keyword: '', // keyword for search
      dataShow: [], // data for showing
      showNum: 8, // number of item per page
      currentPage: 1
    }
  },
  methods: {
    updateDataShow: function () {
      const startPage = (this.currentPage - 1) * this.showNum
      const endPage = startPage + this.showNum
      this.dataShow = this.data.slice(startPage, endPage)
    },
    pageChange: function (page) {
      this.currentPage = page
      this.updateDataShow()
    },
    search: function () {
      const that = this
      const tempData = that.data
      that.dataShow = []
      tempData.forEach(function (elem) {
        for (const i in elem) {
          if (elem[i].toString().indexOf(that.keyword) > -1) {
            that.dataShow.push(elem)
            return
          }
        }
      })
    }
  },
  watch: {
    data: function () {
      this.dataShow = this.data.slice(0, this.showNum) // update dataShow once data changed
    }
  },
  mounted: function () {
    this.dataShow = this.data.slice(0, this.showNum)
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/css/style.css';
.vm-image-list .image-list-heading .page span {
  margin-right: 10px;
}
.vm-image-list .image-list-heading .page span.margin-end {
  margin-right: 20px;
}
.vm-image-list .image-list-heading .page .input-number {
  width: 40px;
  margin-right: 10px;
}
.vm-image-list .image-list-heading .panel-body {
  margin-top: -15px;
}
.vm-image-list .image-list-heading .panel-body > div {
  margin-top: 15px;
}
</style>
